<template>
  <div class="register">
    <div class="bg"></div>
    <div class="container">
      <span class="title">会员注册</span>
      <div class="hr"></div>
      <section class="main">
        <div class="device-frame">
          <h4 class="title_big30">注册帐号</h4>
          <div>
            <!-- 登录页面 -->
            <div class="regbox">
              <h4 class="tit_normal">国家/地区</h4>
              <div class="listwrap">
                <div class="listtit">
                  <div
                    id="tits"
                    class="tits"
                  >
                    <p class="result-select-regions">中国</p>
                    <i class="icon_cirarr"></i>
                  </div>
                </div>
              </div>
              <div class="region_tip_text">
                成功注册帐号后，国家/地区将不能被修改
              </div>
              <h4 class="tit_normal">手机号码</h4>
              <div class="listwrap_inside_panel c_b">
                <div
                  id="select-cycode"
                  class="listwrap"
                >
                  <div
                    class="listtit"
                    id="reg-phone-select-cty"
                  >
                    <div class="tits">
                      <p id="select-cycode-result">+86</p>
                      <i class="icon_arrow"></i>
                    </div>
                  </div>
                </div>
                <div class="inputbg">
                  <input
                    id="text"
                    type="tel"
                    name="phone"
                    data-type="PH"
                    placeholder="请输入手机号码"
                  />
                </div>
                <div class="err_tip">
                  <div class="dis_box">
                    <em class="icon_error"></em>
                    <span>请输入手机号码</span>
                  </div>
                </div>
              </div>
              <input
                id="btn"
                class="btn332 btn_reg_1 submit-step"
                data-to="phone-step2"
                type="submit"
                value="立即注册"
              />
              <div class="privacy_box">
                <div class="msg">
                  <label class="n_checked select-privacy">
                    已阅读并同意：彩虹捕手
                    <a
                      href="javascript: void(0);"
                      class="inspect_link agreement_link"
                      title="用户协议"
                      target="_blank"
                    >用户协议</a>
                    和
                    <a
                      href="javascript: void(0);"
                      class="inspect_link privacy_link"
                      title=" 隐私政策 "
                      target="_blank"
                    >
                      隐私政策
                    </a>
                  </label>
                </div>
              </div>
            </div>
            <!-- 验证码页面 -->
            <div class="regboxTwo">
              <div class="step2_txt">
                <p>
                  我们已经发送一条验证短信至<span class="address-place ff6">+86 13660354891</span>
                </p>
                <p>请输入短信中的验证码</p>
                <div class="inputcode">
                  <label class="labelbox">
                    <input
                      class="resendcode"
                      type="text"
                      placeholder="请输入验证码"
                      name="ticket"
                    />
                  </label>
                  <button class="remain">
                    <a
                      class="color333 send-status"
                      href="javascript:void(0)"
                    >重新发送</a>
                  </button>
                </div>
                <div class="err_tip">
                  <div class="dis_box">
                    <em class="icon_error"></em>
                    <span>请输入短信验证码</span>
                  </div>
                </div>
                <div class="sns_unavaliable">
                  <a
                    target="_blank"
                    href="javascript:;"
                  >收不到验证码？</a>
                </div>
                <div class="fixed_bot mar_phone_dis2">
                  <input
                    class="btn332 btn_reg_1  submit-step"
                    type="submit"
                    value="下一步"
                  />
                  <input
                    class="btn332 btn_reg_2  change-view"
                    data-to="phone-step1"
                    type="button"
                    value="返回"
                  />
                </div>
              </div>
            </div>
            <!-- 设置密码 -->
            <div class="regboxthree">
              <div class="step2_txt">
                <p>
                  您注册的手机号码为：<span class="address-place ff6">13660354891</span>
                </p>
                <p class="title">请设置您的密码：</p>
                <label class="labelbox regboxthree-code">
                  <input
                    class="resendcode ticket"
                    type="password"
                    placeholder="请输入密码"
                    name="ticket"
                  />
                </label>
                <div class="err_tip">
                  <div class="dis_box">
                    <em class="icon_error"></em>
                    <span>请输入密码</span>
                  </div>
                </div>
                <label class="labelbox regboxthree-code">
                  <input
                    class="resendcode tickettwo"
                    type="password"
                    placeholder="请再输入一次密码"
                    name="tickettwo"
                  />
                </label>
                <div class="err_tip">
                  <div class="dis_box">
                    <em class="icon_error"></em>
                    <span>两次密码不一样</span>
                  </div>
                </div>
                <p class="title_tis">
                  密码长度8~16位,数字、字母、字符至少包含两种
                </p>
                <input
                  class="btn332 btn_reg_1  submit-step"
                  type="submit"
                  value="提交"
                />
              </div>
            </div>
            <!-- 账号显示 -->
            <div class="regbox-accunt">
              <div class="step2_txt">
                <p>
                  您的小米ID：<span class="address-place ff6">13660354891</span>
                </p>
                <input
                  class="btn332 btn_reg_1  submit-step"
                  type="submit"
                  value="登录"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <FooterSub />
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
$fc: #ff6637;
.register {
  .container {
    margin-bottom: 16px;
  }
  .bg {
    width: 100%;
    height: 450px;
    background: url("../assets/swiper/2.png") no-repeat;
    background-position-x: center;
  }
  .title {
    margin-top: 16px;
    display: inline-block;
    padding: 12px 20px;
    color: $fc;
    font-size: 16px;
    border-bottom: 2px solid $fc;
  }
  .hr {
    height: 1px;
    background-color: #eaeaea;
  }
  /* 主要内容 */
  .main {
    padding-top: 16px;
    width: 854px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

  .device-frame {
    background-color: #fff;
    min-height: 400px;
  }

  /* logo */
  .external_logo_area {
    padding-bottom: 40px;
    display: block;
  }

  .milogo {
    width: 49px;
    height: 48px;
    margin: 0 auto;
    display: block;
    cursor: default;
    background-color: #ff6700;
    background-image: url(../assets/login/mi-logo.png);
    background-repeat: no-repeat;
  }

  /* 标题 */
  .title_big30 {
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    color: #333;
    line-height: 1.5;
  }

  /* 登录页面内容盒子 */
  .regbox {
    width: 332px;
    padding: 30px 0;
    line-height: 20px;
    font-size: 14px;
    margin: 0 auto;
  }

  /* 国家地区 */
  .regbox .tit_normal {
    padding-bottom: 5px;
    color: #333;
    font-weight: normal;
  }

  .listwrap {
    position: relative;
  }

  /* 国家地区文本框 */
  .tits {
    height: 40px;
    width: 314px;
    padding-left: 14px;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #e8e8e8;
    color: #555;
    cursor: pointer;
  }

  .tits p {
    float: left;
    width: 270px;
    border-right: 1px solid #e8e8e8;
    cursor: pointer;
  }

  .icon_cirarr {
    float: right;
    background: url(../assets/register/icon_user.png);
    width: 16px;
    height: 16px;
    margin: 11px 12px 0 12px;
  }

  /* 提示 */
  .region_tip_text {
    margin-top: 5px;
    margin-bottom: 15px;
  }

  /* 编号文本框 */
  .listwrap_inside_panel .listwrap {
    float: left;
  }

  .listwrap_inside_panel .tits {
    width: 50px;
    text-align: center;
    padding: 0 9px;
  }

  .listwrap_inside_panel .tits p {
    width: auto;
    border-right: 0 none;
  }

  .icon_arrow {
    float: left;
    margin: 17px 0 0 10px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #9d9d9d transparent transparent transparent;
  }

  .listwrap_inside_panel .inputbg {
    float: left;
  }

  .inputbg {
    padding-bottom: 15px;
  }

  .listwrap_inside_panel .inputbg input {
    width: 254px;
    height: 38px;
    border: 1px solid #e8e8e8;
    border-left: 0;
  }

  .listwrap_inside_panel .labelbox {
    margin-left: -1px;
    position: relative;
    z-index: 3;
    padding-left: 10px;
  }

  .labelbox,
  .input_bg {
    height: 40px;
    line-height: 40px;
    display: inline-block;
  }

  .labelbox,
  .input_bg,
  .tits_list,
  .borderbox {
    border: 1px solid #e8e8e8;
  }

  /* 输入错误提示 */
  .err_tip {
    margin-bottom: 5px;
    line-height: 20px;
    font-size: 14px;
    color: #f66;
    display: none;
  }

  .icon_error {
    width: 14px;
    height: 14px;
    margin: -1px 5px 0 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    background-image: url(../assets/register/icon_user.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
  }

  .err_tip span {
    vertical-align: middle;
  }

  /* 按钮 */
  .btn_reg_1 {
    background-color: #ff6700;
    margin-top: 15px;
    border: 1px solid rgba(186, 186, 186, 0.3);
    color: #fff;
    margin-top: 70px;
  }

  .btn332 {
    width: 330px;
    height: 42px;
    margin: 0 auto;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    display: block;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    overflow: hidden;
  }

  /* 声明 */
  .privacy_box {
    text-align: center;
    padding-top: 40px;
  }

  .msg {
    color: #9d9d9d;
  }

  .n_checked {
    padding: 10px 0;
    cursor: pointer;
    display: inline-block;
  }

  .msg a {
    color: #333;
  }

  .ftbold,
  .msg em,
  .msg a {
    font-weight: bold;
  }

  /* 验证码页面盒子 */
  .regboxTwo,
  .regboxthree,
  .regbox-accunt {
    width: 332px;
    padding: 30px 0;
    line-height: 20px;
    margin: 0 auto;
    display: none;
  }

  .step2_txt,
  .step2_txt p {
    padding-bottom: 10px;
  }

  .step2_txt .address-place {
    color: #ff6700;
  }

  /* 文本框 */
  .regboxTwo .inputcode {
    margin-top: 10px;
    width: 580px;
    height: auto;
    padding-bottom: 15px;
  }

  .labelbox,
  .input_bg {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
  }

  .labelbox,
  .input_bg,
  .tits_list,
  .borderbox {
    border: 1px solid #e8e8e8;
  }

  .labelbox input,
  .input_bg input {
    height: 20px;
    line-height: 20px;
    padding: 10px;
    display: inline-block;
  }

  .inputcode .resendcode {
    width: 210px;
  }

  .remain {
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e8e8e8;
  }

  .remain a {
    color: #000;
    cursor: pointer;
    padding: 0 10px;
    display: block;
  }

  /* 错误提示 */
  .step2_txt .err_tip {
    margin-bottom: 10px;
  }

  .sns_unavaliable a {
    color: #46639c;
  }

  .fixed_bot,
  .fixed_bot .btn_reg_2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  /* 设置密码 */
  .regboxthree p {
    font-weight: bold;
    font-size: 16px;
  }

  .regboxthree .title {
    margin-bottom: 15px;
  }

  .regboxthree .regboxthree-code {
    width: 330px;
    margin-bottom: 10px;
  }

  .regboxthree .btn_reg_1 {
    margin-top: 5px;
    margin-bottom: 50px;
  }

  .regboxthree .title_tis {
    font-weight: 400;
    font-size: 14px;
  }

  /* 登录 */
  .regbox-accunt .step2_txt {
    text-align: center;
  }

  .regbox-accunt p {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
  }

  .regbox-accunt .btn_reg_1 {
    margin-top: 58px;
  }

  /* 底部 */
  .footer-wrap {
    background-color: #f9f9f9;
    height: 80px;
    text-align: center;
  }

  .footer-wrap .lang-select-list li {
    display: inline-block;
  }

  .lang-select-list a {
    display: inline-block;
    padding: 0 10px;
  }

  .lang-select-list a:hover,
  .lang-select-list a.current {
    color: #333;
  }

  .footer-intro {
    padding: 10px;
    color: #9d9d9d;
  }

  /* 扫码登录 */
  .loginbox .ercode_pannel {
    width: 410px;
    height: 475px;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }

  .ercode_pannel .ercode_box {
    position: static;
    left: 50%;
    top: 50%;
  }

  .ercode_box .code_iframe {
    width: 302px;
    height: 180px;
    background-image: url(../assets/login/iframe.png);
    background-repeat: no-repeat;
    background-position: center center;
  }

  .custom_sub_txt {
    padding-top: 14px;
    font-size: 14px;
    display: block;
    text-align: center;
    color: #757575;
  }

  .custom_sub_txt span {
    padding: 0 5px;
    color: #ff6700;
  }
}
</style>
